<!--
表格的内容区域
props有：
data：存放展示数据的数组 类型：数组
page：存放分页的参数的对象 {page: , pageSize: , total: } 类型：对象
Bottom: 表格距离底部的距离 类型： Number
-->
<template>
  <div class="the-table" :class="{'hide-scroll-bar': hideScrollBar}">
    <el-table ref="table" row-key="id" :data="data || tableData" :height="height" :row-class-name="tableRowClassName"
      :header-cell-style="{ background: headBg, color: '#666', 'text-align':'center' }" :fit="true" :size="size"
      :style="{ marginBottom: Bottom + 'px' }" style="width: 100%; font-size: 14px" tooltip-effect="dark"
      :cell-style="{'text-align':'center'}" @selection-change="handleSelectionChange">
      <!-- 多选框 @selection-change="handleSelectionChange"-->
      <el-table-column type="selection" width="55">
      </el-table-column>

      <!-- 插槽 -->
      <slot></slot>

      <!-- 没有数据的时候显示 -->
      <div slot="empty" class="empty" style="padding: 20px 0">
        <div v-if="showEmptyTips">
          <i class="el-icon-box"></i>
          <p>{{ emptyText }}</p>
        </div>
      </div>
    </el-table>
    <!-- 分页 :hide-on-single-page="hideOnePage"-->
    <div class="pagination">
      <el-pagination background :page-size="page.pageSize" :total="page.total"
        :page-sizes="[5, 10, 20, 30, 40, 50, 60, 80]" :current-page.sync="page.current" @current-change="changePage"
        @size-change="changeSize" layout="total, sizes, prev, pager, next, jumper" v-if="page.total>0"></el-pagination>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'ReportTable',
    inject: ["reload"],
    props: {
      data: Array,
      page: {
        type: Object,
      },
      defaultData: Boolean,
      // Table 的高度，默认为自动高度
      height: {
        type: String
      },
      isLimit: {
        type: Boolean,
        default: true
      },
      // 表格没有数据时显示的文字
      emptyText: {
        type: String,
        default: '暂无数据'
      },

      // 只有一页时是否隐藏分页
      hideOnePage: {
        type: Boolean,
        default: true
      },
      // 表格距离底部的距离 margin-bottom
      Bottom: {
        type: Number,
        default: 0
      },
      // 是否显示序号 对象 两个值 show决定是否显示 width决定宽度
      isOrder: {
        type: Object,
        default: function () {
          return {
            show: true,
            width: '100px'
          }
        }
      },
      hideScrollBar: {
        type: Boolean,
        default: false
      },
      // Table 的尺寸
      size: {
        type: String,
        default: 'medium'
      },
      // 表头单元格的背景
      headBg: {
        type: String,
        default: '#F8F8F9'
      }
    },
    data() {
      return {
        tableData: [],
        // multipleSelection: [],
        showEmptyTips: false,
      }
    },
    updated() {
      this.$nextTick(() => {
        this.$refs.table.doLayout()
      })
    },
    created() {},
    mounted() {
      if (!this.data) {
        this.setDefaultData()
      }
      this.setEmptyTips();
    },
    methods: {
      handleSelectionChange(val) {
        // console.log(val);
        // this.multipleSelection = val;
        this.$emit("getDataBySelectBox", val)
      },
      setDefaultData() {
        let arr = []
        for (let i = 0; i < 25; i++) {
          arr.push({
            id: i + 1,
            default: '默认值'
          })
        }
        this.tableData = arr
      },
      // 点击分页 *******
      changePage(val) {
        this.page.current = val
        // 这个会传回page对象 调用父组件的changePage方法，请求数据
        this.$emit("changePage", this.page)
      },
      // 改变每页显示记录数
      changeSize(val) {
        this.page.pageSize = val
        this.$emit("changeSize", this.page)
      },
      // 每一页pageSize持久化
      pageSizeStore(val) {},
      handleSelectionChage(val) {
        this.multipleSelection = val
      },
      filterTag(value, row) {
        return row[this.statusProp] === value
      },
      setEmptyTips() {
        setTimeout(() => {
          this.showEmptyTips = true
        }, 300)
      },
      // 表格间隔
      tableRowClassName({
        row,
        rowIndex
      }) {
        return (rowIndex + 1) % 2 === 0 ? "even-row" : "odd-row"
      },
      doLayout() {
        this.$nextTick(() => {
          this.$refs.table.doLayout()
        })
      }
    },
    watch: {
      data: {
        handler(newVal, oldVal) {
          this.$nextTick(() => {
            this.$refs.table.doLayout()
          })
        },
        immediate: true,
        deep: true
      },
      page: {
        handler(newVal, oldVal) {
          if (newVal) {
            this.pageData = newVal
          }
        },
        immediate: true,
        deep: true
      },
      multipleSelection: {
        handler(newVal, oldVal) {
          if (newVal !== oldVal) {
            this.$emit("selectData", newVal)
          }
        },
        immediate: true,
        deep: true
      }
    }
  }

</script>

<style lang="scss" scoped>
  .the-table {
    height: 100% !important;

    // 分页组件
    /deep/ .el-pagination {
      margin: 20px 0 0 -5px;
      padding-left: 0;
    }

    // 滚动条
    /deep/ ::-webkit-scrollbar {
      height: 6px !important;
      display: block !important;
    }

    .empty {
      i {
        color: #d7d6d6;
        font-size: 40px;
      }

      p {
        color: #999999;
        font-size: 13px;
        line-height: 30px;
        margin-top: -10px;
      }
    }

    .pagination {
      margin-left: 300px;
    }
  }

  .hide-scroll-bar {
    /deep/ ::-webkit-scrollbar {
      width: 0 !important;
      height: 0 !important;
    }
  }

</style>
